<template>
  <div>
    <div class="dv88" v-if="this.list.length == 0">
      <div class="navbar">
        <p>编辑</p>
        <span>购物车</span>
        <span></span>
      </div>
      <img src="../../assets/img/cart.png" alt="" />
    </div>
    <div v-else>
      <div class="navbar">
        <p>编辑</p>
        <span>购物车</span>
        <span></span>
      </div>
      <van-checkbox-group v-model="result">
        <van-swipe-cell v-for="(item, index) in list" :key="index">
          <van-row>
            <van-col span="3" class="chk">
              <van-checkbox :name="item"></van-checkbox>
            </van-col>
            <van-col span="21">
              <van-card
                :price="item.minPrice"
                :title="item.name"
                :desc="item.characteristic"
                :thumb="item.pic"
              >
                <template #footer>
                  <van-stepper v-model="item.num" />
                </template>
              </van-card>
            </van-col>
          </van-row>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(index, item)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>

      <van-submit-bar :price="allPrice" button-text="提交订单">
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <div class="tottom">
      <div class="centerkan">
        <span>猜你喜欢</span>
      </div>
      <div class="box">
        <div
          v-for="(item, index) in lists"
          :key="index"
          v-show="index < 4"
          @click="goshopcar(item)"
        >
          <img :src="item.pic" alt="" />
          <p class="p1" v-html="item.name">{{}}</p>
          <p class="p2">{{ item.characteristic }}</p>
          <span class="sp1">￥{{ item.minPrice }}</span>
        </div>
      </div>
      <div class="dv5"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      result: [],
      copylist: [],
      checked: false,
      lists: [],
    };
  },
  mounted() {
    console.log(this.$route.query.id);
    //   console.log(this.$store.state.list);
    this.$API.getStoreList().then((res) => {
      //   console.log(res);
      this.copylist = res.data.data;
      console.log();
      this.list = this.copylist.filter((item) => {
        if (item.id == this.$route.query.id) {
          return item;
        }
      });
      // console.log(list);
      //   this.$store.commit("set", this.copylist);
      //   console.log(this.list);
      //   console.log(this.$route.query.id);
    });

    this.$API.getStoreList().then((res) => {
      this.lists = res.data.data;
      this.lists = this.lists.slice(9, 13);
      console.log(this.lists);
    });
  },
  methods: {
    del(index, val) {
      this.list.splice(index, 1);
      console.log(val);
      this.result.forEach((item, index) => {
        if (item == val) {
          this.result.splice(index, 1);
        }
      });
    },
    goshopcar(item) {
      this.$router.push({ path: "/shopcar", query: { id: item.id } });
    },
  },
  watch: {
    checked(newVal) {
      if (newVal == true) {
        this.result = this.list;
      } else {
        this.result = [];
      }
    },
  },
  computed: {
    allPrice() {
      let sum = 0;
      this.result.forEach((item) => {
        sum += item.minPrice * item.num;
      });
      return sum * 100;
    },
  },
};
</script>

<style lang="scss" scoped>
.dv88 {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 70%;
  }
}
.navbar {
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.7rem;
  p {
    color: red;
  }
}
.van-submit-bar__bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  height: 50px;
  padding: 0 16px;
  font-size: 14px;
  //   margin-bottom: 20rem;
}
.van-submit-bar {
  position: fixed;
  bottom: 3rem;
  left: 0;
  z-index: 100;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
.dv5 {
  width: 100%;
  height: 5rem;
  // background: blue;
}
.centerkan {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 1rem;
  }
}
.box {
  width: 100%;
  //   height: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  font-size: 0.7rem;
  div {
    width: 47%;
    // height: 5rem;
    // background: seagreen;

    img {
      width: 100%;
      height: 60%;
    }
    .sp1 {
      color: red;
    }
  }
  .tottom {
    position: fixed;
    bottom: 10%;
  }
}
.p1 {
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p2 {
  font-size: 0.4rem;
  color: grey;
}
</style>